<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#wrap {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;

				width: 400px;
				height: 400px;
				border: 1px solid;
				
				/* background: url(../08_2D变换/img/open.png) no-repeat; */
				/* background-size: 100% 100%; */
				
				/* background: pink; */

				perspective: 200px;
				/*开启3d舞台 这是一个不可继承的属性*/
				transform-style: preserve-3d;
			}

			#wrap>.box {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;

				width: 100px;
				height: 100px;
				background: pink;

				/*这里最好这样写，只指定transform的过渡。否则“基点”的过渡也会显示。*/
				transition: 3s transform;
				
				/*这个属性一定要写在初始化box这里，别写在hover中*/
				/* transform-origin: center center -50px; */

				/* transform: rotateX(-30deg) rotateY(-30deg); */
				
				/*开启3d舞台 这是一个不可继承的属性*/
				transform-style: preserve-3d;
			}

			#wrap:hover .box {
			}

			#wrap>.box>div {
				position: absolute;
				width: 100px;
				height: 100px;
				/* background: deeppink; */
				text-align: center;
				font: 40px/100px "agency fb";
			}

			#wrap>.box>div:nth-child(1) {
				/*前*/
			}

			#wrap>.box>div:nth-child(2) {
				/*后*/
			}

			#wrap>.box>div:nth-child(3) {
				/*左*/
			}

			#wrap>.box>div:nth-child(4) {
				/*右*/
			}

			#wrap>.box>div:nth-child(5) {
				/*上*/
			}

			#wrap>.box>div:nth-child(6) {
				/*下*/
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<!-- 没有心情笔记了，看视频吧 -->
			<div class="box">
				<div>前</div>
				<div>后</div>
				<div>左</div>
				<div>右</div>
				<div>上</div>
				<div>下</div>
			</div>
		</div>
	</body>
</html>
